<!-- 注册结果显示 -->
<template>
    <div id="registerSuccess">
        <div class="bg"></div>
        <el-row class="main-container">
            <el-col :lg="8" :xs="16" :md="10" :span="10">
                <div class="top">
                    <i class="iconfont icon-kaoshi"></i><span class="title">在线考试系统</span>
                </div>
                <div class="bottom">
                    <div class="container">
                        <p class="title">注册成功</p>
                        <p>账号:{{ account }}</p>
                        <br>
                        <p>密码:{{ password }}</p>
                        <br>
                        <el-button type="primary" class="row-cancel" @click="Register()">继续注册</el-button>
                        <el-button type="primary" class="row-cancel" @click="cancelRegister()">返回登录</el-button>
                        <br>
                        <p :style="{ color: 'red' }">请记好自己的账号密码哦</p>
                    </div>
                </div>

            </el-col>
        </el-row>
        <el-row class="footer">
            <el-col>
                <p class="msg2">如存在问题,可联系管理员: 1552951165(QQ)</p>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import { mapState } from 'vuex'

export default {
    name: "registerSuccess",
    data() {
        return {
            account: '123',
            password: '123',
            role: 2,
            labelPosition: 'left',
        }
    }, 
    mounted() {
        if (this.$route.query.studentId != null) {
            this.account = this.$route.query.studentId;
            
        } else {
            this.account = this.$route.query.teacherId;
        }
        this.password = this.$route.query.pwd;
    },
    methods: {
        Register() { //取消按钮
            this.$router.push({ path: '/register' })
        },
        cancelRegister() { //取消按钮
            this.$router.push({ path: '/' })
        },
        computed: mapState(["userInfo"]),
        mounted() {

        }
    }
}
</script>
  
<style lang="less" scoped>
.container {
    margin-bottom: 32px;
}

.container .el-radio-group {
    margin: 30px 0px;
}

#registerSuccess .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    height: 100%;
    background: url('../../assets/img/loginbg.png')center top / cover no-repeat;
    background-color: #b6bccdd1 !important;
}

#registerSuccess .main-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#registerSuccess .main-container .top {
    margin-top: 100px;
    font-size: 30px;
    color: #ff962a;
    display: flex;
    justify-content: center;
}

#registerSuccess .top .icon-kaoshi {
    font-size: 80px;
}

#registerSuccess .top .title {
    margin-top: 20px;
}

#registerSuccess .bottom {
    display: flex;
    justify-content: center;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#registerSuccess .bottom .title {
    text-align: center;
    font-size: 30px;
}

.bottom .container .title {
    margin: 30px 0px;
    ;
}

.bottom .submit .row-login {
    width: 100%;
    background-color: #04468b;
    border-color: #04468b;
    margin: 20px 0px 10px 0px;
    padding: 15px 20px;
}

.bottom .submit {
    display: flex;
    justify-content: center;
}

.footer {
    margin-top: 50px;
    text-align: center;
}

.footer .msg1 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 15px;
}

.footer .msg2 {
    font-size: 14px;
    color: #673232;
    margin-top: 70px;
}

.bottom .options {
    margin-bottom: 40px;
    color: #ff962a;
    display: flex;
    justify-content: space-between;
}

.bottom .options>a {
    color: #ff962a;
}

.bottom .options .register span:nth-child(1) {
    color: #8C8C8C;
}
</style>
